/* 约定式路由时的全局布局文件 */
import React, { useEffect } from 'react';
import { Menu } from 'antd';
import { Link } from 'umi';
import routes from '@/routers';
import { Routes } from '@/routers/routers';
import styles from '@/assets/BasicLayout.less';

const { SubMenu } = Menu;

const menuTabs = (list: Routes[]): any => {
  return list.map((item: Routes) => {
    if (item.children && item.children.length) {
      return (
        <SubMenu key={item.path} title={item.title}>
          {menuTabs(item.children)}
        </SubMenu>
      );
    } else {
      return (
        !item.hidden && (
          <Menu.Item key={item.path}>
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        )
      );
    }
  });
};

function BasicLayout(props: any) {
  // console.log("BasicLayout",  props, );
  const { history } = props;

  useEffect(() => {
    // history.push('/buildSet');
  }, []);

  return (
    <div>
      {/* 导航布局 */}
      <nav>
        <Menu mode="horizontal">{menuTabs(routes)}</Menu>
      </nav>
      {/* 路由会将相应的页面组件映射到上面的 props.children 中 */}
      <main className={styles.main}>{props.children}</main>
      <footer></footer>
    </div>
  );
}

export default BasicLayout;
